<template>
  <div class="xfn-table-info">
    <el-card shadow="hover">
      <!-- 根据传入的状态值 作为方法的实参return出不同的颜色值 -->
      <div class="xfn-table" :style="{ background: getTableColor(data.status) }">{{ data.tid }}号桌:{{ data.status | status }}</div>
      <el-button size="mini" type="success" plain @click="showDetail">详情</el-button>
      <el-button size="mini" type="danger" plain @click="updateDetail">修改</el-button>
    </el-card>
    <!-- 对话框 -->
    <el-dialog :title="`${data.tid}号桌台详情`" :visible="dialogFormVisible" :before-close="closeDialog">
      <!-- 主体 -->
      <div class="dialogMain">
        <!-- tab被选中时才开始绘制canvas -->
        <el-tabs @tab-click="makeQRCode" v-model="activeName" type="card">
          <el-tab-pane label="桌台状态" name="TableStatus">
            <!-- 桌台状态具体信息-->
            <div style="text-align:left">
              <div v-for="(item, i) of tableStutusList" :key="i">
                <span class="item-title">{{ i }}</span>
                <span class="item-item">{{ item }}</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="桌台二维码" name="TableEriwei">
            <!-- 绘制二维码 利用qr模块+绘制好的二维码图片路径完成 -->
            <img :src="DataUrl" alt="" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
      </div>
    </el-dialog>

    <!-- 修改桌台的对话框 -->
    <el-dialog title="桌台信息修改" :visible.sync="dialogVisible" width="50%">
      <el-radio-group v-model="statusTable" @change="changeStatus(statusTable)">
        <el-radio-button label="0">空闲</el-radio-button>
        <el-radio-button label="1">预订</el-radio-button>
        <el-radio-button label="2">占用</el-radio-button>
      </el-radio-group>

      <!-- 修改表体 -->
      <!-- 预约 -->
      <el-form v-show="statusTable == 1">
        <el-row>
          <el-button type="primary" style="margin-right:10px;margin-bottom:10px;margin-top:10px">请输入预约人姓名</el-button>
          <el-input placeholder="请输入预约人姓名" v-model="appointmentName" clearable style="width:70%"> </el-input>
        </el-row>
        <el-row>
          <el-button type="primary" style="margin-right:10px;margin-bottom:10px;margin-top:10px">请输入预约人数</el-button>
          <el-input type="number" placeholder="请输入预约人数" v-model="appointmentNumber" clearable style="width:70%"> </el-input>
        </el-row>

        <el-row>
          <el-button type="primary" style="margin-right:10px;margin-bottom:10px">请输入联系电话</el-button>
          <el-input placeholder="请输入联系电话" v-model="iphone" clearable style="width:70%"> </el-input>
        </el-row>

        <el-row>
          <el-button type="primary" style="margin-right:10px;margin-bottom:10px">请选择用餐时间</el-button>
          <!-- <el-input placeholder="请选择用餐时间" v-model="eatTime" clearable style="width:70%"> </el-input> -->
          <el-date-picker v-model="eatTime" type="datetime" placeholder="选择日期时间" style="width:70%" @change="changeTime(eatTime)"> </el-date-picker>
        </el-row>
      </el-form>
      <!-- 占用 -->
      <el-form v-show="statusTable == 2">
        <el-row>
          <el-button type="primary" style="margin-right:10px;margin-bottom:10px;margin-top:10px">请输入用餐人姓名</el-button>
          <el-input placeholder="请输入用餐人姓名" v-model="appointmentName" clearable style="width:70%"> </el-input>
        </el-row>
        <el-row>
          <el-button type="primary" style="margin-right:10px;margin-bottom:10px;margin-top:10px">请输入用餐人人数</el-button>
          <el-input placeholder="请输入用餐人人数" v-model="appointmentNumber" clearable style="width:70%"> </el-input>
        </el-row>

        <el-row>
          <el-button type="primary" style="margin-right:10px;margin-bottom:10px">请输入联系电话</el-button>
          <el-input placeholder="请输入联系电话" v-model="iphone" clearable style="width:70%"> </el-input>
        </el-row>

        <el-row>
          <el-button type="primary" style="margin-right:10px;margin-bottom:10px">请选择用餐时间</el-button>
          <el-date-picker v-model="eatTime" type="datetime" placeholder="选择日期时间" style="width:70%" @change="changeTime(eatTime)"> </el-date-picker>
        </el-row>
      </el-form>

      <br />
      <br />
      <el-button type="danger" @click="toUpdateSend">确认修改</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      //控制对话框是否开启关闭
      dialogFormVisible: false,
      //当前选择哪个标签页
      activeName: "TableStatus",
      //动态从服务器回传的数据
      tableStutusList: null,
      //保存绘制好的 二维码图片路径
      DataUrl: "1",
      //   修改桌台对话框
      dialogVisible: false,
      // 桌台状态
      statusTable: 0,
      // 预约人姓名
      appointmentName: "",
      //预约人数
      appointmentNumber: null,
      // 联系电话
      iphone: "",
      // 用餐时间
      eatTime: "",
    };
  },
  filters: {
    status(val) {
      if (val == 0) {
        return "空闲";
      } else if (val == 1) {
        return "预定";
      } else if (val == 2) {
        return "占用";
      }
    },
  },
  methods: {
    // 修改状态
    updateDetail() {
      // console.log("桌台状态", this.tableStutusList);
      console.log(this.data);
      // this.$alert("修改按钮正在开发中...", "标题名称", { confirmButtonText: "确定" });
      this.statusTable = this.data.status;
      this.dialogVisible = true;
    },

    // 修改桌台状态事件
    changeStatus(val) {
      // console.log(val);
      this.statusTable = val;
    },
    //修改用餐时间
    changeTime(time) {
      this.eatTime = time.getTime();
      // console.log(this.eatTime);
    },
    // 确认修改
    toUpdateSend() {
      this.dialogVisible = false;
      // this.$store.state.globalSettings.apiUrl
      // 发起请求 http://127.0.0.1:8090/tables/updateTable?tid=10&statusTable=2&
      let obj = {
        status: this.statusTable,
        name: this.appointmentName,
        number: this.appointmentNumber,
        phone: this.iphone,
        eattime: this.eatTime + "",
      };
      this.axios
        .post("http://127.0.0.1:8090/tables/updateTable", obj)
        .then((res) => {
          console.log(res.data);
          this.$message({ message: "修改成功!", type: "success", showClose: true, duration: 2000 });
        })
        .catch((err) => {
          this.$message({ message: "修改失败!", type: "danger", showClose: true, duration: 2000 });
        });
    },

    //根据传入的值返回颜色
    getTableColor(status) {
      if (status == 0) {
        return "#67C23A";
      } else if (status == 1) {
        return "#E6A23C";
      } else if (status == 2) {
        return "#F56C6C";
      }
    },
    //处理状态
    getStatus(val) {
      if (val == 0) {
        return "空闲";
      } else if (val == 1) {
        return "预定";
      } else if (val == 2) {
        return "占用";
      }
    },
    //处理时间
    getTime(time) {
      //把bigint保存的毫秒数转换为yyyy-mm-dd hh:mm:ss  1999年-08月-12:32:42
      //把bigint保存的毫秒数转换为yyyy-mm-dd 1999年-08月-08日
      let date = new Date(time);
      //年
      let yy = date.getFullYear();
      //月
      let mm = date.getMonth() + 1;
      //获取的月份是否大于9 也就是10月以上 两位数 都默认显示 否则 1 2 3 等等都变为 01 02 03
      mm = mm > 9 ? mm : "0" + mm;
      //日
      let dd = date.getDate();
      dd = dd > 9 ? dd : "0" + dd;
      //时
      let hh = date.getHours();
      hh = hh > 9 ? hh : "0" + hh;
      //分
      let mi = date.getMinutes();
      mi = mi > 9 ? mi : "0" + mi;
      //秒
      let ss = date.getSeconds();
      ss = ss > 9 ? ss : "0" + ss;
      //返回
      return `${yy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
    },
    //桌台信息处理
    showDetail() {
      console.log(this.data); //当前点击的桌台信息

      let tid = this.data.tid; //获得桌台tid
      //如果当前点击的桌台状态为2 则代表是预约则需要发送请求获取对应预约信息
      if (this.data.status == 1) {
        //定义请求路径
        let url = this.$store.state.globalSettings.apiUrl + `/tables/yuyue/${tid}`;
        //发送ajax
        this.axios.get(url).then((res) => {
          let obj = res.data[0];
          //将对象 进行相应处理
          let result = {
            桌台状态: this.getStatus(this.data.status),
            预约人名: obj.contactName,
            联系电话: obj.phone,
            联系时间: this.getTime(obj.contactTime),
            用餐时间: this.getTime(obj.dinnerTime),
          };
          //模型对象赋值
          this.tableStutusList = result;
          console.log(result);
        });
      } else if (this.data.status == 2) {
        //如果点击状态为占用则输出占用者信息
        let url = this.$store.state.globalSettings.apiUrl + `/tables/zhanyong/${tid}`;
        //发送ajax
        this.axios.get(url).then((res) => {
          let obj = res.data[0];
          //将对象进行响应处理
          console.log(obj);
          let result = {
            桌台状态: this.getStatus(this.data.status),
            订单号: obj.oid,
            开始用餐时间: this.getTime(obj.startTime),
            结束用餐时间: this.getTime(obj.endTime),
            用餐人数: obj.customerCount,
          };
          this.tableStutusList = result;
        });
      } else {
        //否则其他和空闲状态都为 只显示桌台状态
        this.tableStutusList = { 桌台状态: this.getStatus(this.data.status) };
      }
      this.dialogFormVisible = true; //显示桌台信息
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    //创建二维码 - 注意 不能直接在mounted中调用 因为绘图必须的canvas元素 写在了el-dialog中 对话框在组件加载时 并没有再dom树上
    makeQRCode() {
      function 注释() {
        //调用qrcode方法绘制画布 第一个参数 画布canvas 第二个参数需要绘制的内容:可以是网址 文字 图片视频等等
        // 第三个参数{errorCorrectionLevel:'L'} 二维码错误修正级别 H 很高 M中等 L 很低/默认
        // qrcode.toCanvas(canvas,'tableUrl',{
        //     errorCorrectionLevel:'H',
        //     width:300
        // })
        // 因为使用了el-dialog每次点击的对话框会生成不同的canvas但id又相同 会导致二维码出现一些问题 所以改用 qrcode.toDataUrl()
        //把绘制得到的图片 以二进制数据转换为字符编码
        // 参数1:需要将什么内容进行编码
        // 参数2:对象 指定二维码的各种属性
        // 参数3:因为绘制图片 - 到转换为二维码需要时间所以这个操作是异步的(err,url)=>{}
      }
      let qrcode = require("qrcode");
      //每个桌台对应的URL 例>  http:/127.0.0.1:8092/#/3 客户手机app扫码进入的网址 3 == tid 根据用户点哪个桌台生成哪个桌台的URL二维码
      // let tableUrl = this.$store.state.globalSettings.appUrl + "/#/" + this.data.tid;
      let tableUrl = "http://150.158.21.251/";
      console.log(tableUrl); //每次点击的路径 根据tid生成
      qrcode.toDataURL(
        tableUrl,
        {
          width: 300,
          errorCorrectionLevel: "H",
        },
        (err, url) => {
          // console.log(url,'二维码图片绘制完成');
          // this.DataUrl = url ;
          //将图片 打包为base64编码格式的字符串
          // console.log(this.DataUrl)
          // 最后将页面img的src路径设置为该编码后的字符串即可呈现
          this.DataUrl = url;
        }
      );
    },
  },
};
</script>

<style lang="scss">
.xfn-table-info {
  padding: 2px;
  text-align: center;
  .xfn-table {
    width: 90%;
    height: 100px;
    // border-radius: 50%;
    border-radius: 5%;
    border: 1px solid #aaa;
    // box-shadow: 3px -4px 5px #666;
    margin: 10px auto;
    line-height: 100px;
  }
  .item-title {
    display: inline-block;
    font-size: 16px;
    margin-left: 20px;
    margin-top: 10px;
  }
  .item-item {
    display: inline-block;
    font-size: 16px;
    text-align: center;
    padding: 5px;
    border-radius: 10px;
    color: #fff;
    background: #909399;
  }
}
</style>
